<template>
  <div id="myChart4" :style="{ width: '100%', height: '90%' }"></div>
</template>

<script>
import { defineComponent, toRefs, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'RingChart',
  setup() {
    const state = reactive({
      option: {
        // title: {
        //   text: '月度港星量占比',
        //   left: '45%',
        //   textAlign: 'center',
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        // grid: {
        //   top: '10%',
        //   left: '0%',
        //   right: '0%',
        //   bottom: '20%',
        //   containLabel: true,
        // },
        series: [
          {
            type: 'pie',
            radius: [50, 70],
            // top: top + '%',
            // height: '33.33%',
            left: 'center',
            width: 300,
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c} %}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 20,
              rich: {
                time: {
                  fontSize: 12,
                  color: '#fff'
                }
              }
            },
            labelLine: {
              length: 10,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                  ? params.labelRect.x
                  : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            color: ['#0C5EA5','#058CFF','#61B5FF','#B8DFFF','#2BCABC'],
            data: [
              { name: '深圳', value: 86 },
              { name: '广州', value: 32 },
              { name: '上海', value: 20 },
              { name: '洋口', value: 16 },
              { name: '海南', value: 30 },
              { name: '天津', value: 17 }
            ],
          }
        ],
      },
    })
    const initeCharts = () => {
      let myChart2 = echarts.init(document.getElementById('myChart4'))
      // 绘制图表
      myChart2.setOption(state.option)
    }

    onMounted(() => {
      initeCharts()
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

<style scoped>

</style>
